<template>
	<view id="index">
		<view class="tabsbox">
			<view class="tabs">
				<text @click="changeTabs(-1)" :class="tabsIndex==-1?'this':''">最新文案</text>
				<text @click="changeTabs(item.type)" :class="tabsIndex==item.type?'this':''" v-for="(item,index) in tabs" :key="index">{{item.name}}</text>
			</view>
		</view>
		<view class="newsList">
			<view class="newsListBox" v-for="(item,index) in list" :key="index" @click="changeRouter(item.id)">
				<view class="newsListBoxLeft" v-if="((item.img))">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
				<view class="newsListBoxRight">
					<view class="title">{{item.title}}</view>
					<view class="msg">
						<view><image src="@/static/time.png" mode="widthFix"></image>{{item.createtime}}</view>
						<text>阅读量:{{item.read}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this
	export default {
		data() {
			return {
				imageUrl:"",
				tabs:[],
				tabsIndex:-1,
				list:[],
				page:1,
				last_page:1,
			}
		},
		onLoad() {
			_this = this
			_this.imageUrl = _this.$imageUrl
			_this.getTabs()
			_this.getNews(_this.tabsIndex)
		},
		//分享
		onShareAppMessage(){

		},
		//分享朋友圈
		onShareTimeline(){

		},
		onPullDownRefresh() {
			_this.page = 1
			_this.getNews(_this.tabsIndex)
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom(){
			if(_this.last_page>_this.page){
				_this.page++
				_this.getNews(_this.tabsIndex)
			}else{
				uni.showToast({
					icon:'none',
					title: '已经到底~~',
					duration: 2000
				});
			}
		},
		methods: {
			getTabs:async function(){
				await _this.$api.tabs(res=>{
					_this.tabs = res.data
				})
			},
			changeTabs(type){
				_this.page = 1
				_this.tabsIndex = type
				_this.getNews(type)
			},
			getNews:async function(type){
				let arr = {
					'type':type,
					'page':_this.page
				}
				await _this.$api.getNews(arr,res=>{
					// console.log(res)
					_this.last_page = res.data.last_page
					res.data.list.forEach((item, index) => {
						item.createtime = _this.$util.timeToDate(item.createtime)
					});
					if(_this.page==1){
						_this.list = res.data.list
					}else{
						_this.list = _this.list.concat(res.data.list)
					}
				})
			},
			changeRouter(id){
				uni.navigateTo({
					url: '/pages/library/library?id='+id,
				})
			},
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f8f8f8;
		min-height: 100vh;
		padding: 32rpx;
		box-sizing: border-box;
		.tabsbox{
			box-sizing: border-box;
			overflow-x: scroll;
			position: sticky;
			top: 0;
			left: 0;
			background-color: #f8f8f8;
			padding: 12rpx 0;
			.tabs{
				display: flex;
				gap: 0 24rpx;
				text{
					flex: 0 0 25%;
					text-align: center;
					box-sizing: border-box;
					padding: 12rpx 0;
					font-size: 28rpx;
				}
				.this{
					color: #fff;
					border-radius: 12rpx;
					background-color: #1373FF;
				}
			}
		}
		.newsList{
			.newsListBox{
				margin-top: 24rpx;
				padding: 24rpx;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				gap: 0 24rpx;
				background-color: #fff;
				.newsListBoxLeft{
					image{
						width: 260rpx;
						height: 160rpx;
						border-radius: 24rpx;
					}
				}
				.newsListBoxRight{
					flex: 1 0 10%;
					.title{
					  margin-bottom: 24rpx;
					  width: 360rpx;
					  white-space: nowrap; /* 禁止文本换行 */
					  overflow: hidden; /* 隐藏超出范围的内容 */
					  text-overflow: ellipsis; /* 使用省略号 */
					}
					.msg{
						display: flex;
						justify-content: space-between;
						font-size: 20rpx;
						color: #9B9B9B;
						view{
							display: flex;
							align-items: center;
							gap: 0 12rpx;
						}
						image{
							width: 32rpx;
						}
					}
				}
			}
		}
	}
</style>
